<template>
  <div class="container">
    <div class="search-box">
      <div class="search-con"><i class="icon-question"></i>
        <div class="more-select-box">
          <!-- <i class="icon icon-more-select-hand"></i> -->
          <div class="btn-more-select">
            更多产品选型
            <i class="icon icon-more-select"></i></div>
        </div>
        <div class="search">
          <div class="lbl lbl-choose-product">系列搜索</div>
          <div class="ipt"><input type="text" v-model="searchParams" placeholder="请输入系列名" class="ipt-search" @click="isBoxShow = true"></div>
          <div class="btn"></div>
        </div>
      </div>
      <div v-if="isBoxShow" class="float-product-choose" style="left: 489px;">
        <div class="triangle-top"></div>
        <div class="head-box">
          <div style="width: 162px;">产品品牌</div>
          <div style="width: 232px;">产品品类</div>
          <div style="flex: 1 1 0%;">产品系列</div>
        </div>
        <div class="btp-box">
          <div class="brand-box" style="height: 482px;">
            <div v-for="(item, index) in navigator" :key="index" class="brand" :class="{'active': navigatorActive === index}" @mouseenter="brandSelect(item, index)">
              <div v-if="navigatorActive !== index" class="brand-name">{{ item.name }}</div>
              <div v-else class="brand-img"><img :src="item.image" width="90" class="brand-img-item"></div>
              <i class="icon icon-active"></i></div>
          </div>
          <div class="type-box" style="height: 482px;">
            <div v-for="(v, i) in types" :key="i" class="row">
              <div id="cata1_name_0" class="name cata1-name">
                <i class="icon icon-type-1"></i>
                <span class="type-name">{{v.name}}</span>
                <i class="icon icon-type icon-type-n"></i>
              </div>
              <div v-for="(o, index) in v.children" :key="o.id" class="item"  :class="{'active': typeActive === o.id}" @mouseenter="typeSelect(o, index)">
                <div class="type cata2-name">{{o.name}}</div>
                <i class="icon icon-active"></i>
              </div>
            </div>
          </div>
          <div class="prop-box" style="height: 482px;">
            <div v-for="item in series" :key="item.id" class="prop" @click="seriesSelect(item)">
              <span>{{ item.name }}</span> <i class="icon icon-active"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="float-product-input" style="display: none;"></div>
    </div>
    <div class="content">
      <div class="l-box-box">
        <div class="l-box">
          <div class="tab-box">
            <div class="tab" :class="{active: tabActive === 'owner'}" @click="tabActive = 'owner'">本体</div>
            <div class="tab" :class="{active: tabActive === 'attach'}" @click="tabActive = 'attach'">附件</div>
            <div class="btn">
              <div class="reset-param"><i class="icon icon-reset-param"></i>重置已选参数
              </div>
            </div>
          </div>
          <div v-if="tabActive === 'owner'" class="param-box" style="height: 781px;">
            <div v-for="item in searcherSpecsChanged" :key="item.name" class="row">
              <div class="name"><i class="icon icon-param-n"></i>{{item.name}}:</div>
              <ul id="ul_field_name_In_A" class="param">
                <li v-for="v in item.values" :key="v.id" id="field_In_A_11" :class="{'active': v.id === item.activeId}" @click="item.activeId = v.id" style="position: relative;">{{v.name}}
                  <div id="field_tip_In_A_11" class="float-div field-tip-l" style="display: none;">
                    <div class="con"><br></div>
                    <div class="triangle-top"></div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div v-if="tabActive === 'attach'" class="attach-box" style="height: 781px;">
            <div class="attach-search-box">
              <div class="attach-search"><input type="text" placeholder="请输入需要搜索的附件">
                <div class="btn-cyan btn-search"><i class="icon icon-fj-search"></i></div>
              </div>
              <div class="only-add-box">
                <div class="btn-only-add" :class="attachCheckList.length ? 'btn-red' : 'btn-gray'">仅添加附件</div>
              </div>
            </div>
            <div class="attach-remark" style="display: none;">
              <div class="together">
                <div><input type="checkbox" id="chkTogether" checked="checked"><label
                  for="chkTogether">同本体组装一起供货</label></div>
              </div>
              <div class="remark">
                <div class="bp"><i></i>标配
                </div>
                <div class="xp"><i></i>选配
                </div>
                <div title="只能同本体一起组装，不能单独购买" class="zh"><i></i>只能组合
                </div>
              </div>
            </div>
            <div class="attach-list" style="height: 661px;">
              <el-checkbox-group v-model="attachCheckList">
                <div v-for="(item, index) in attachList" :key="index" class="row">
                  <div class="name"><i class="icon icon-param-n"></i>{{index+1}}.{{item.cata_name}}</div>
                  <div id="div_attach_title_0" class="aa">
                    <div class="item">
                      <el-checkbox v-for="v in item.list" :key="v.id" :label="v.sku">{{v.desc}}</el-checkbox>
                    </div>
                  </div>
                </div>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <div class="r-box" style="left: 0px; position: relative;">
        <div class="tit">选型结果</div>
        <div class="result con-box" v-for="item in products" :key="item.id">
          <div class="pic-box">
            <div class="pic">
              <img :src="item.image" alt="">
            </div>
            <div title="点击加入收藏" class="favorite"><i class="icon-fav"></i><span>加入收藏</span></div>
            <div>图片仅供参考</div>
          </div>
          <div class="info-box">
            <div class="row" style="line-height: 16px;">
              <div class="lbl">型<span style="display: inline-block; width: 25.5px;"></span>号：</div>
              <div class="info" style="font-size: 16px;">
                <router-link :to="`/detail/${item.id}`" target="_blank">{{item.model_name}}</router-link>
              </div>
            </div>
            <div class="row" style="line-height: 16px;">
              <div class="lbl">订<span style="display: inline-block; width: 6.5px;"></span>货<span
                style="display: inline-block; width: 6.5px;"></span>号：
              </div>
              <div class="info" style="font-size: 16px;">
                <div>
                  <router-link :to="`/detail/${item.id}`" target="_blank">{{item.part_number}}</router-link>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="lbl" style="padding-top: 3px;">产品描述：</div>
              <div class="info">
                <ul>
                  <li>{{item.model_name}}</li>
                  <li v-for="[key,values] in Object.entries(item.parameters)" :key="key">{{key}}: {{values}};&nbsp;&nbsp;</li>
                </ul>
              </div>
            </div>
            <div class="row">
              <div class="lbl fjms"><span>附件</span><i class="icon icon-down"></i>
                <div class="jb">{{attachCheckList.length}}</div>
              </div>
              <div class="info">-</div>
            </div>
            <div class="row price-row">
              <div class="l">
                <div><span>会员价：</span> <span class="price">￥{{item.price}}</span></div>
                <div><span>面<span style="display: inline-block; width: 13px;"></span>价：</span> <span
                  class="mprice">￥<strike>{{item.discount_price}}</strike></span></div>
              </div>
              <div class="r">
                <div>
                  <span>品<span style="display: inline-block; width: 13px;"></span>牌：</span>
                  <span class="brand">
                    <router-link :to="`/brand/${item.brand_id}`" target="_blank">{{item.brand_name}}</router-link>
                  </span>
                </div>
                <div><span>系<span style="display: inline-block; width: 13px;"></span>列：</span><span
                  class="prop">{{item.series_name}}</span></div>
              </div>
            </div>
            <div class="row btn-row">
              <div class="l">
                <div data-track="加入清单_专业选型" data-category="click_product_selector" class="btn-red btn-add-list" @click="addList(item.id)">
                  <i class="icon icon-add-list"></i>
                  <span>加入清单</span>
                </div>
              </div>
              <div class="r">
                <div class="btn-cyan btn-product-sample"><i class="icon icon-product-sample"></i><span>产品样本</span><i
                  class="icon icon-down"></i></div>
              </div>
            </div>
            <div class="price-ver">Ver. 20200101</div>
          </div>
        </div>
        <div class="list-box-box" style="height: 815px;">
          <div class="list-box" style="height: 815px;">
            <div class="table-title"><i class="icon icon-table-title"></i>选型确认清单
            </div>
            <table border="0" cellspacing="0" cellpadding="0" class="list">
              <thead>
              <tr>
                <td width="10%" colspan="2">序号</td>
                <td width="10%">品牌</td>
                <td min-width="10%">型号 | <span style="color: rgb(150, 150, 150);">订货号</span></td>
                <td width="10%">市场价</td>
                <td width="10%">会员价</td>
                <td width="10%">库存</td>
                <td width="15%">数量</td>
                <td width="10%">删除</td>
              </tr>
              </thead>
            </table>
            <div class="list-con" style="max-height: 687px;">
              <table border="0" cellspacing="0" cellpadding="0" class="list">
                <tbody>
                <tr v-for="(item, index) in list" :key="item.id">
                  <td width="10%" style="height: 60px;">{{index + 1}}</td>
                  <td width="10%">{{item.brand_name}}</td>
                  <td min-width="20%">{{item.model_name}} | {{item.part_number}}</td>
                  <td width="10%">{{item.price}}</td>
                  <td width="10%">{{item.discount_price}}</td>
                  <td width="10%">
                    <el-input-number v-model="item.amount" @change="amountChange" :min="0" :max="100"></el-input-number>
                  </td>
                  <td width="15%">{{item.amount}}</td>
                  <td width="10%">
                    <svg-icon icon-class="delete" class-name="delete" @click="del(item.id)" />
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <div class="opera-box"
                 style="border-top: 1px solid rgb(222, 222, 222); border-bottom: 1px solid rgb(222, 222, 222);">
              <div class="l"><input type="checkbox" id="sel_all"><label for="sel_all">全选</label>
                <div class="btn-black btn-del-sel">删除选中的产品</div>
              </div>
              <div class="r">
                <div class="btn-cyan btn-export-list"><i class="icon icon-export-list"></i>
                  导出清单
                </div>
                <div class=" btn-add-cart" style="width: 155px;" :class="hasAmount ? 'btn-red' : 'btn-gray'" @click="addCart">
                  <i class="icon icon-add-cart"></i>
                  确认并添加到购物车
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript" src="https://tajs.qq.com/stats?sId=66566068" charset="UTF-8"></script>
<script>
import { mapMutations } from 'vuex'
import { attachList } from '@/utils/product-attach'
import { productFields } from '@/utils/product-fields'
import { categoryParameter, categories } from '@/api/category'
import { products } from '@/api/goods'
import { addCartMulti } from '@/api/cart'
export default {
  name: 'ProductSelector',
  metaInfo: {
    title: '专业选型',
    titleTemplate: '工流界MRO一站式采购商城'
  },
  data () {
    return {
      attachList,
      info: productFields.info,
      isBoxShow: false,
      navigatorActive: 0,
      typeActive: 0,
      types: [],
      series: [],
      brandName: '',
      cataCode: '',
      propCode: '',
      searchParams: '',
      tabActive: 'owner',
      attachCheckList: [],
      searcherSpecsChanged: [],
      products: [],
      parameters: '',
      navigator: [],
      list: [],
      hasAmount: false
    }
  },
  watch: {
    searcherSpecsChanged: {
      handler (values) {
        const map = {}
        values.forEach(item => {
          if (item.activeId) {
            map[item.name] = item.activeId
          }
        })
        // 参数筛选 （框架电流:1600A;分断能力:66KA;极数:3P;） 用分号";"隔离 多个参数 用冒号":" 隔离参数名与参数值
        const parameters = []
        for (const [key, value] of Object.entries(map)) {
          parameters.push(`${key}:${value}`)
        }
        this.parameters = parameters.join(';')
        this.fetchProducts()
      },
      deep: true
    }
  },
  created () {
    this.fetchParams()
    this.fetchCategories()
  },
  mounted () {
    this.setHasNav(false)
  },
  methods: {
    ...mapMutations({
      setHasNav: 'app/SET_PAGE_HAS_NAV'
    }),
    // 改变商品的数量
    amountChange (val) {
      this.hasAmount = val > 0
    },
    async fetchParams () {
      const res = await categoryParameter({
        category_id: '1003'
      })
      this.searcherSpecsChanged = res.map(item => {
        item.activeId = ''
        return item
      })
    },
    async fetchProducts () {
      const res = await products({
        parameters: this.parameters
      })
      this.products = res.data.map(item => {
        item.amount = 0
        return item
      })
    },
    async fetchCategories () {
      const res = await categories()
      this.navigator = res.data
    },
    brandSelect (item, index) {
      this.types = item.children
      this.navigatorActive = index
      this.brandName = item.name
    },
    typeSelect (item, index) {
      console.log(item)
      this.typeActive = item.id
      this.series = item.children || []
      this.cataCode = item.name
    },
    seriesSelect (item) {
      this.propCode = item.name
      this.searchParams = this.brandName + ' > ' + item.name
      this.isBoxShow = false
    },
    addList (id) {
      const current = this.products.filter(item => item.id === id)
      current.map(item => {
        item.amount = 0
        return item
      })
      this.list.push(...current)
    },
    del (id) {
      this.list.splice(this.list.indexOf(this.list.find(element => element.id === id)), 1)
    },
    async addCart () {
      const goods = []
      const products = this.list.filter(item => item.amount > 0)
      products.forEach(item => {
        goods.push({
          product_id: item.id,
          amount: item.amount
        })
      })
      if (!goods.length) {
        this.$message.warning('请输入数量！')
        return
      }
      try {
        await addCartMulti({ items: goods })
        this.$message.success('添加购物车成功！')
        this.list = []
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    margin-top: 10px;
  }

  .search-box {
    width: 1300px;
    height: 68px;
    background-color: #f8f8f8;
    border: 1px solid #dedede;
    border-top: 5px solid #4448f8;
    margin: 15px auto;
    position: relative;
  }

  .search-box .search {
    width: 675px;
    height: 36px;
    border: 1px solid #4448f8;
    background-color: #fff;
    margin: 15px auto;
    display: flex;
    flex-direction: row;
  }

  .search-box .search .lbl {
    background-color: #4448f8;
    color: #fff;
    width: 86px;
    height: 36px;
    line-height: 36px;
    text-align: center;
  }

  .search-box .search .ipt {
    flex: 1px;
    line-height: 30px;

  }

  .search-box .search .ipt input[type='text'] {
    width: 100%;
    height: 32px;
    text-indent: 15px;
    position: relative;
    border: none;
    color: #333;
  }

  .search-box .search .btn {
    background: url(./images/icon_xx_search.png) no-repeat;
    width: 17px;
    height: 18px;
    align-self: center;
    margin-right: 18px;
    cursor: pointer;
  }

  .search-box .float-product-choose {
    width: 675px;
    position: absolute;
    top: 66px;
    background-color: #fff;
    border: 1px solid #dedede;
    z-index: 3;
    border-top: none;
  }

  .search-box .search-con {
    display: flex;
    flex-direction: row;
    width: 1030px;
    margin: 0px auto;
    font-size: 13px;
  }

  .search-box .more-select-box {
    flex: 1;
    padding: 15px 0px;
    text-align: right;
    margin-right: 15px;
  }

  .search-box .more-select-box .icon-more-select-hand {
    background: url(./images/icon_more_select_hand.png) no-repeat;
    width: 40px;
    height: 24px;
    position: relative;
    top: 7px;
    -webkit-animation: nudge 1s linear infinite alternate;
    animation: nudge 1s linear infinite alternate;
  }

  @-webkit-keyframes nudge {
    0%, 100% {
      left: 0px;
    }
    50% {
      left: 10px;
    }
  }

  @keyframes nudge {
    0%, 100% {
      left: 0px;
    }
    50% {
      left: 10px;
    }
  }

  .search-box .more-select-box .icon-more-select {
    background: url(./images/icon_more_select.png) no-repeat;
    width: 18px;
    height: 14px;
    position: relative;
    top: 2px;
    margin-left: 10px;
  }

  .search-box .more-select-box .btn-more-select {
    background-color: #ff0000;
    width: 161px;
    height: 36px;
    line-height: 36px;
    color: #fff;
    text-align: center;
    display: inline-block;
    border: 1px solid #ff0000;
    margin-left: 6px;
  }

  .search-box .more-select-box .btn-more-select:hover {
    background-color: #de4044;
    cursor: pointer;
  }

  .content {
    display: flex;
    flex-direction: row;
    width: 1300px;
    margin: 20px auto;
  }

  .l-box-box {
    width: 422px;
    margin-right: 15px;
  }

  .l-box {
    width: 422px; /*margin-right:15px;*/
    position: relative;
    z-index: 2;
  }

  .l-box.fixed {
    position: fixed;
    top: 1px;
  }

  .l-box .tab-box {
    display: flex;
    flex-direction: row;
  }

  .l-box .tab-box .tab {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #2e2e2e;
    background-color: #e5e5e5;
    margin-right: 1px;
    cursor: pointer;
    transition: all 0.2s linear;
  }

  .l-box .tab-box .tab.active {
    background-color: #4448f8;
    color: #fff;
  }

  .l-box .tab-box .btn {
    flex: 1;
  }

  .l-box .tab-box .btn .reset-param {
    width: 123px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #666;
    text-align: center;
    color: #fff;
    float: right;
    cursor: pointer;
    background-color: #666;
  }

  .l-box .tab-box .btn .reset-param .icon-reset-param {
    background: url(./images/icon_reset_param.png) no-repeat;
    width: 15px;
    height: 15px;
    position: relative;
    top: 3px;
    margin-right: 4px;
  }

  .l-box .param-box, .l-box .attach-box {
    border: 1px solid #dedede;
    border-top: 5px solid #4448f8;
    overflow-y: auto;
    background-color: #f8f8f8;
  }

  .l-box .param-box .row {
    display: flex;
    flex-direction: column;
  }

  .l-box .param-box .row li {
    float: left;
    width: 60px;
    padding: 10px;
  }

  .l-box .param-box .name {
    width: 100%;
    height: 36px;
    color: #000;
    line-height: 36px;
    font-weight: bold;
    background-color: #fff;
    cursor: pointer;
    border-bottom: 1px solid #dedede;
    text-align: left;
  }

  .l-box .param-box .name .icon-param-n1 {
    background: url(./images/icon_param_n.png) no-repeat;
    width: 5px;
    height: 11px;
    align-self: center;
    margin-left: 20px;
    margin-right: 8px;
    position: relative;
    top: 1px;
  }

  .l-box .param-box .name .icon-param-n {
    background: url(./images/icon_param_n1.png) no-repeat;
    width: 11px;
    height: 5px;
    align-self: center;
    margin-left: 20px;
    margin-right: 8px;
    position: relative;
    top: -2px;
    left: -2px;
  }

  .l-box .attach-box .name .icon-param-n1 {
    background: url(./images/icon_param_n.png) no-repeat;
    width: 5px;
    height: 11px;
    align-self: center;
    margin-left: 11px;
    margin-right: 8px;
    position: relative;
    top: 1px;
  }

  .l-box .attach-box .name .icon-param-n {
    background: url(./images/icon_param_n1.png) no-repeat;
    width: 11px;
    height: 5px;
    align-self: center;
    margin-left: 11px;
    margin-right: 8px;
    position: relative;
    top: -2px;
    left: -2px;
  }

  .l-box .param-box .param {
    background-color: #f8f8f8;
    border-bottom: 1px solid #dedede;
  }

  .l-box .param-box .row:last-child .param {
    border-bottom: none;
  }

  .l-box .param-box .param li:hover {
    cursor: pointer;
    color: #4448f8;
  }

  .l-box .param-box .param .active {
    font-weight: bold;
    color: #4448f8;
  }

  .l-box .param-box .phide {
    display: none;
  }

  .l-box .attach-box .attach-search-box {
    display: flex;
    flex-direction: row;
    width: 362px;
    margin: 15px auto;
  }

  .l-box .attach-box .attach-search-box .attach-search {
    border: 1px solid #4448f8;
    width: 200px;
    height: 25px;
    display: flex;
    flex-direction: row;
  }

  .l-box .attach-box .attach-search-box .attach-search input[type='text'] {
    flex: 1;
    background-color: transparent;
    text-indent: 18px;
    border: none;
  }

  .l-box .attach-box .attach-search-box .attach-search input[type='text']::-webkit-input-placeholder {
    color: #c8c8c8;
  }

  .l-box .attach-box .attach-search-box .attach-search .btn-search {
    width: 36px;
    height: 25px;
    line-height: 25px;
    text-align: center;
  }

  .l-box .attach-box .attach-search-box .attach-search .btn-search .icon-fj-search {
    background: url(./images/icon_fj_search.png) no-repeat;
    width: 17px;
    height: 18px;
    position: relative;
    top: 3px;
  }

  .l-box .attach-box .attach-search-box .only-add-box {
    flex: 1;
  }

  .l-box .attach-box .attach-search-box .only-add-box .btn-only-add {
    width: 100px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    float: right;
  }

  .l-box .attach-box .attach-list {
    border: 1px solid #dedede;
    width: 362px;
    margin: 0px auto;
    color: #787878;
    font-size: 13px;
    overflow-y: auto;
  }

  .l-box .attach-box .attach-list .row .name {
    background-color: #fff;
    color: #000;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    height: 36px;
    line-height: 36px;
    text-indent: 18px;
    font-weight: bold;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
  }

  .l-box .attach-box .phide {
    display: none;
  }

  .l-box .attach-box .attach-list .row:first-child .name {
    border-top: none;
  }

  .l-box .attach-box .attach-list .row .item {
    padding: 5px 26px;
    overflow: hidden;
    text-align: left;
  }

  .l-box .attach-box .attach-list .row .item label:hover {
    color: #4448f8;
  }

  .l-box .attach-box .attach-list .row .item:first-child {
    margin-top: 8px;
  }

  .l-box .attach-box .attach-list .row .item:last-child {
    padding-bottom: 15px;
  }

  .l-box .attach-box .attach-list .row .item /deep/ .el-checkbox__label {
    position: relative;
    cursor: pointer; /*overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient: vertical;display:-webkit-box !important;*/
    height: 16px;
    width: 288px;
    line-height: 17px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    color: #606266;
  }

  .l-box .attach-box .attach-list .row .item input[type='checkbox'] {
    cursor: pointer;
  }

  .l-box .attach-box .attach-remark {
    display: flex;
    flex-direction: row;
    width: 362px;
    margin: 0px auto 10px auto;
    line-height: 20px;
    font-size: 13px;
  }

  .l-box .attach-box .attach-remark .together {
    flex: 1;
  }

  .l-box .attach-box .attach-remark .together input[type='checkbox'] {
    position: relative;
    top: -2px;
  }

  .l-box .attach-box .attach-remark .together label {
    margin-left: 7px;
    display: inline-block;
    color: #333;
  }

  .l-box .attach-box .attach-remark .remark {
    display: flex;
    flex-direction: row;
  }

  .l-box .attach-box .attach-remark .remark i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    margin-left: 15px;
  }

  .l-box .attach-box .attach-remark .remark .bp i {
    background-color: #4448f8;
  }

  .l-box .attach-box .attach-remark .remark .xp i {
    background-color: #787878;
  }

  .l-box .attach-box .attach-remark .remark .zh i {
    background-color: #ff0000;
  }

  .l-box .attach-box .attach-remark .remark .bp, .l-box .attach-box .attach-list .item .bp {
    color: #4448f8;
  }

  .l-box .attach-box .attach-remark .remark .xp {
    color: #787878;
  }

  .l-box .attach-box .attach-remark .remark .zh {
    color: #ff0000;
  }

  .l-box .attach-box .attach-list .name .tip {
    font-weight: normal;
    color: #bbbbbb;
    font-size: 12px;
    margin-left: 8px;
  }

  .r-box {
    flex: 1;
    min-height: 754px;
    z-index: 2;
  }

  .tit {
    background-color: #4448f8;
    color: #fff;
    width: 108px;
    height: 28px;
    text-align: center;
    line-height: 28px;
  }

  .con-box, .list-box {
    background-color: #fff;
    border: 1px solid #dedede;
  }

  .result {
    display: flex;
    flex-direction: row;
    padding: 30px 28px 0px 28px;
    position: relative;
    margin-bottom: 22px;
    width: 807px;
  }

  .result .pic-box {
    color: #c8c8c8;
    text-align: center;
    font-size: 13px;
    margin-right: 35px;
    min-height: 320px;
  }

  .result .info-box {
    color: #969696;
    flex: 1;
    font-size: 13px;
  }

  .result .pic-box .pic {
    border: 1px solid #dedede;
    width: 248px;
    height: 230px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .result .pic-box .pic img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }

  .favorite {
    color: #969696;
    margin-bottom: 15px;
  }

  .favorite:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .favorite.active {
    color: #36c2cb;
  }

  .favorite .icon-fav {
    background: url(./images/icon_fav.png) no-repeat;
    width: 21px;
    height: 19px;
    display: inline-block;
    margin-right: 5px;
  }

  .favorite.active .icon-fav {
    background: url(./images/icon_fav_ed.png) no-repeat;
    width: 21px;
    height: 19px;
    display: inline-block;
    margin-right: 5px;
  }

  .favorite span {
    position: relative;
    top: -4px;
    font-size: 12px;
  }

  .info-box .row {
    display: flex;
    flex-direction: row;
    margin-bottom: 13px;
  }

  .info-box .row .lbl {
    width: 68px;
    margin-right: 5px;
    padding-top: 3px;
  }

  .info-box .row .info {
    flex: 1;
    color: #000;
    font-size: 12px;
    word-break: break-all;
    line-height: 20px;
    text-align: left;
  }

  .info-box .row .info li {
    float: left;
    line-height: 22px;
    margin-right: 10px;
  }

  .info-box .row .lbl.fjms {
    border: 0px solid #ff0000;
    width: 60px;
    height: 28px;
    text-align: center;
    line-height: 24px;
    margin-right: 14px;
    position: relative;
    cursor: pointer;
    background-color: #ff0000;
    color: #fff;
  }

  .info-box .row .lbl.fjms .jb {
    background-color: #fff;
    color: #ff0000;
    border: 1px solid #ff0000;
    min-width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 18px;
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 10px;
  }

  .info-box .row.price-row {
    background-color: #f5f5f5;
    padding: 8px 36px;
  }

  .info-box .row.price-row .l, .info-box .row.price-row .r {
    width: 50%;
    line-height: 30px;
  }

  .info-box .price-ver {
    position: absolute;
    top: 8px;
    right: 15px;
    font-size: 12px;
    color: #000;
  }

  .price-row .price {
    color: #ff0000;
    font-size: 20px;
    margin-left: 3px;
    font-weight: bold;
  }

  .price-row .brand {
    color: #4448f8;
    font-weight: bold;
    margin-left: 6px;
  }

  .price-row .mprice, .price-row .prop {
    color: #000;
    margin-left: 6px;
    text-align: left;
  }

  .info-box .row.btn-row {
    padding: 8px 36px;
    margin-top: 0px;
  }

  .info-box .row.btn-row .l, .info-box .row.btn-row .r {
    width: 50%;
  }

  .info-box .row.btn-row .btn-add-list {
    width: 128px;
    height: 34px;
    line-height: 34px;
    font-size: 12px;
  }

  .info-box .row.btn-row .btn-product-sample {
    width: 128px;
    height: 34px;
    line-height: 34px;
    font-size: 12px;
  }

  .tag-no-sale {
    background-color: #fff;
    color: #ff0000;
    border: 1px solid #ff0000;
    width: 42px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
  }

  .icon {
    display: inline-block;
    position: relative;
  }

  .icon-add-list {
    background: url(./images/icon_add_list.png) no-repeat;
    width: 17px;
    height: 19px;
    top: 5px;
    margin-right: 10px;
  }

  .icon-product-sample {
    background: url(./images/icon_product_sample.png) no-repeat;
    width: 17px;
    height: 19px;
    top: 5px;
    margin-right: 10px;
  }

  .icon-down {
    background: url(./images/icon_down.png) no-repeat;
    width: 14px;
    height: 9px;
    margin-left: 6px;
  }

  .btn-red {
    background-color: red;
    color: #fff;
    text-align: center;
  }

  .btn-red:hover {
    background-color: #de4044;
    cursor: pointer;
  }

  .btn-cyan {
    background-color: #4448f8;
    color: #fff;
    text-align: center;
  }

  .btn-cyan:hover {
    background-color: #24aaac;
    cursor: pointer;
  }

  .btn-black {
    background-color: #666666;
    color: #fff;
    text-align: center;
  }

  .btn-black:hover {
    background-color: #444444;
    cursor: pointer;
  }

  .btn-gray {
    background-color: #bbbbbb;
    color: #fff;
    text-align: center;
  }

  .btn-gray:hover {
    cursor: default;
  }

  .list-box {
    position: relative;
    z-index: 2;
    width: 863px;
  }

  .list-box.fixed {
    position: fixed;
    top: 1px;
    margin-top: 0px;
  }

  .list-box .opera-box {
    display: flex;
    flex-direction: row;
    padding: 15px 28px 15px 15px;
  }

  .list-box .opera-box .l {
    flex: 1;
    display: flex;
    flex-direction: row;
    line-height: 27px;
  }

  .list-box .opera-box .r {
    display: flex;
    flex-direction: row;
  }

  #sel_all {
    position: relative;
    top: 6.5px;
    margin-right: 3px;
  }

  .btn-del-sel {
    width: 128px;
    height: 27px;
    line-height: 27px;
    margin-left: 15px;
  }

  .btn-export-list {
    width: 130px;
    height: 27px;
    line-height: 27px;
    margin-right: 15px;
  }

  .btn-add-cart {
    width: 130px;
    height: 27px;
    line-height: 27px;
  }

  .icon-export-list {
    background: url(./images/icon_export_list.png) no-repeat;
    width: 15px;
    height: 15px;
    top: 3.5px;
    margin-right: 3px;
  }

  .icon-add-cart {
    background: url(./images/icon_add_cart.png) no-repeat;
    width: 18px;
    height: 18px;
    top: 3px;
    margin-right: 3px;
  }

  .list-box input[type='checkbox'] {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: url(./images/bg_checkbox.png) no-repeat;
    background-color: transparent;
    vertical-align: middle;
  }

  .list-box input[type='checkbox']:checked {
    background: url(./images/bg_checkbox1.png) no-repeat;
  }

  .list-box .list {
    color: #323232;
    text-align: center;
    width: 100%;
  }

  .list-box .list-con {
    overflow-y: auto;
  }

  .list-box .list thead tr {
    background-color: #c1ebeb;
    height: 30px;
  }

  .list-box .list tbody td {
    height: 70px;
    line-height: 20px;
  }

  .list-box .list .num-box {
    display: flex;
    flex-direction: row;
    border: 1px solid #e6e6e6;
    width: 105px;
    margin: 0px auto;
  }

  .list-box .num-box .btn-num {
    background-color: #f5f5f5;
    color: #999;
    width: 27px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
  }

  .list-box .num-box .ipt-num {
    flex: 1;
    height: 24px;
    line-height: 24px;
    border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    background-color: #fff;
  }

  .list-box .num-box .ipt-num input[type=text] {
    width: 100%;
    border: none;
    text-align: center;
    height: 20px;
    line-height: 20px;
    position: relative;
    top: -2px;
  }

  .icon-xh {
    border: 1px solid #4448f8;
    color: #4448f8;
    border-radius: 3px;
    width: 30px;
    height: 18px;
    line-height: 18px;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
    margin-left: 10px;
  }

  .icon-tc {
    border: 1px solid #d6a719;
    color: #d6a719;
    border-radius: 3px;
    width: 30px;
    height: 18px;
    line-height: 18px;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
    margin-left: 10px;
  }

  .icon-dh {
    border: 1px solid #ff0000;
    color: #ff0000;
    border-radius: 3px;
    width: 30px;
    height: 18px;
    line-height: 18px;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
    margin-left: 10px;
  }

  .icon-fj {
    border: 1px solid #4448f8;
    color: #4448f8;
    border-radius: 2px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    display: inline-block;
    margin-right: 20px;
    text-align: center; /*position:absolute;left:3.5px;top:7px;*/
    font-size: 10px;
    transform: scale(0.9);
    cursor: pointer;
    margin-left: 4px;
  }

  .list-box .list .tr-warn {
    color: #969696;
  }

  .list-box .list .code-box {
    display: flex;
    flex-direction: row;
    max-height: 60px; /*overflow:hidden;*/
  }

  .list-box .list .code {
    margin-left: 5px; /*overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient: vertical;display:-webkit-box !important;*/
  }

  .list-box .list .code div {
    width: 151px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .icon-warn {
    background: url(./images/icon_warn.png) no-repeat;
    width: 16px;
    height: 16px;
    align-self: center;
    margin-left: 4px;
    cursor: pointer; /*position:absolute;left:4px;*/
  }

  .list-box .list td {
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
  }

  .list-box .list thead td {
    border: none;
    border-right: 1px solid #fff;
  }

  /*.list-box .list thead td:first-child{border:none;}*/
  .list-box .list tr td:last-child {
    border-right: none;
  }

  .list-box .list tr:last-child td {
    border-bottom: none;
  }

  .list-box .list tr td:first-child {
    border-bottom: none;
  }

  .list-box .list tbody .tr-white {
    background-color: #ffffff;
  }

  .list-box .list tbody .tr-gray {
    background-color: #f5f5f5;
  }

  .list-box .td-xu-zj {
    background: url(./images/bg_xu_zj.png) no-repeat;
    width: 68px;
    height: 70px;
    position: relative;
    overflow: hidden;
    min-width: 68px;
    max-width: 68px;
  }

  .list-box .td-xu-zj-nobg {
    width: 68px;
    height: 70px;
    position: relative;
    overflow: hidden;
    min-width: 68px;
    max-width: 68px;
  }

  .list-box .td-xu-fj0 {
    background: url(./images/bg_xu_fj_0.png) no-repeat;
    width: 68px;
    height: 70px;
    position: relative;
    overflow: hidden;
    min-width: 68px;
    max-width: 68px;
  }

  .list-box .td-xu-fj1 {
    background: url(./images/bg_xu_fj_1.png) no-repeat;
    width: 68px;
    height: 70px;
    position: relative;
    overflow: hidden;
    min-width: 68px;
    max-width: 68px;
  }

  .list-box tbody input[type='checkbox'] {
    position: absolute;
    top: 28px;
    right: 15px;
  }

  /*.list-box .td-xu-fj0 input[type='checkbox'],.list-box .td-xu-fj1 input[type='checkbox']{right:28%;}*/
  .list-box tbody .xu {
    margin-left: 20px;
  }

  .list-box .table-title {
    background: #4448f8;
    color: #fff;
    font-weight: bold;
    height: 35px;
    line-height: 30px;
    text-align: center;
    font-size: 15px;
    padding-top: 5px;
  }

  .list-box .table-title .icon-table-title {
    background: url(./images/icon_table_title.png) no-repeat;
    width: 15px;
    height: 15px;
    position: relative;
    margin-right: 8px;
    top: 2px;
  }

  .list-box tbody .icon-del-item {
    background: url(./images/icon_del_attach.png) no-repeat;
    width: 13px;
    height: 14px;
    position: relative;
    top: 1.2px;
    cursor: pointer;
  }

  .delete {
    cursor: pointer;
  }

  .float-div{border:1px solid #dedede;background-color:#fff;min-width:100px;position:absolute;z-index:3;}
  .float-attach-list{width:528px;text-align:center;color:#828282;}
  .float-attach-list .triangle-attach{background:url(./images/triangle_attach_top.png) no-repeat;width:60px;height:12px;position:absolute;top:-9px;left:2px;}
  .float-attach-list .table{width:510px;max-height:150px;margin:0px auto 8px auto;overflow-y:auto;}
  .float-attach-list .thead{background-color:#f08f91;color:#fff;height:28px;line-height:28px;display:flex;flex-direction:row;width:510px;margin:8px auto auto auto;}
  .float-attach-list tbody td{height:29px;line-height:29px;border-right:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;}
  .float-attach-list tbody tr:last-child td{border-bottom:none;}
  .float-attach-list tbody tr td:last-child{border-right:none;}
  .float-attach-list tbody .icon-del-attach{background:url(./images/icon_del_attach.png) no-repeat;width:13px;height:14px;position:relative;top:1.5px;cursor:pointer;}
  .float-attach-list .td-type-desc{overflow:hidden;/*text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient: vertical;display:-webkit-box !important;*/text-align:left;text-indent:10px;}
  .float-attach-list .td-type-desc .attach-type{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:270px;display:inline-block;height:18px;line-height:18px;position:relative;top:5px;}
  .float-product-sample{padding-top:10px;border:none;}
  .float-product-sample .con{width:126px;background-color:#f0f0f0;color:#787878;border:1px solid #dedede;border-top:5px solid #a5e1e1;}
  .float-product-sample .row{height:30px;line-height:30px;position:relative;margin:0px auto;}
  .float-product-sample .row:hover{background-color:#d9d9d9;cursor:pointer;}
  .float-product-sample .row .line{height:1px;width:120px;margin:-1px auto;border-bottom:1px solid #fff;}
  .float-product-sample .row .icon-sample{background:url(./images/icon_product_sample_s.png) no-repeat;width:13px;height:15px;position:absolute;left:18px;top:7px;}
  .float-product-sample .row .icon-sample-3c{background:url(./images/icon_sample_3c.png) no-repeat;width:14px;height:11px;position:absolute;left:18px;top:9px;}
  .float-product-sample .row .icon-sample-3d{background:url(./images/icon_sample_3d.png) no-repeat;width:11px;height:13px;position:absolute;left:18px;top:8px;}
  .float-product-sample .row .icon-sample-ds{background:url(./images/icon_sample_ds.png) no-repeat;width:13px;height:13px;position:absolute;left:18px;top:8px;}
  .float-product-sample .row span{margin-left:40px;}
  .float-product-sample a:hover{color:#787878;}
  .float-product-sample .triangle-top{width:0px;height:0px;border-width:0 6px 6px;border-style:solid;border-color:transparent transparent #a5e1e1;position:absolute;top:4px;right:18px;}
  .float-product-choose .head-box{display:flex;flex-direction:row;background-color:#4448f8;color:#fff;height:35px;line-height:35px;text-align:center;}
  .float-product-choose .btp-box{display:flex;flex-direction:row;}
  .float-product-choose .btp-box .brand-box,.float-product-choose .btp-box .type-box,.float-product-choose .btp-box .prop-box{display:flex;flex-direction:column;height:325px;overflow-y:auto;padding-bottom:15px;}
  .float-product-choose .btp-box .brand-box{box-shadow:-5px 0px 10px rgba(0,0,0,0.1) inset;color:#787878;}
  .float-product-choose .btp-box .brand-box .brand{width:162px;height:36px;min-height:36px;position:relative;line-height:36px;text-align:center;overflow:hidden;}
  .float-product-choose .btp-box .brand-box .brand:first-child{margin-top:6px;}
  .float-product-choose .btp-box .brand-box .brand .brand-img{display:none;margin:0px auto;}
  .float-product-choose .btp-box .brand-box .brand .icon-active{display:none;background:url(./images/icon_to_right.png) no-repeat;width:7px;height:14px;position:absolute;top:10.5px;right:12px;}
  .float-product-choose .btp-box .brand-box .brand.active .brand-name{display:none;}
  .float-product-choose .btp-box .brand-box .brand.active .brand-img{display:block;}
  .float-product-choose .btp-box .brand-box .brand.active .icon-active{display:block;}
  .float-product-choose .btp-box .type-box{text-align:center;width:232px;box-shadow:-5px 0px 10px rgba(0,0,0,0.1) inset;font-size:12.5px;}
  .float-product-choose .btp-box .type-box .row{text-align:left;}
  .float-product-choose .btp-box .type-box .row:first-child{margin-top:4px;}
  .float-product-choose .btp-box .type-box .row .name{position:relative;height:38px;line-height:38px;color:#000;font-weight:bold;font-size:15px;cursor:pointer;}
  .float-product-choose .btp-box .type-box .row .name span{margin-left:56px;}
  .float-product-choose .btp-box .type-box .icon-type-1{background:url(./images/icon_type_1.png) no-repeat;width:13px;height:17px;position:absolute;top:11px;left:28px;}
  .float-product-choose .btp-box .type-box .icon-type-2{background:url(./images/icon_type_2.png) no-repeat;width:16px;height:13px;position:absolute;top:12px;left:28px;}
  .float-product-choose .btp-box .type-box .icon-type-3{background:url(./images/icon_type_3.png) no-repeat;width:13px;height:16px;position:absolute;top:11px;left:28px;}
  .float-product-choose .btp-box .type-box .icon-type-4{background:url(./images/icon_type_4.png) no-repeat;width:18px;height:18px;position:absolute;top:10px;left:26px;}
  .float-product-choose .btp-box .type-box .icon-type-5{background:url(./images/icon_type_5.png) no-repeat;width:22px;height:19px;position:absolute;top:10px;left:25px;}
  .float-product-choose .btp-box .type-box .icon-type-6{background:url(./images/icon_type_6.png) no-repeat;width:13px;height:20px;position:absolute;top:9px;left:29px;}
  .float-product-choose .btp-box .type-box .row .item{max-height:30px;line-height:30px;position:relative;cursor:default;}
  .float-product-choose .btp-box .type-box .row .item.active{background-color:rgba(0,0,0,0.03);}
  .float-product-choose .btp-box .type-box .row .item .icon-active{display:none;background:url(./images/icon_to_right.png) no-repeat;width:7px;height:14px;position:absolute;top:8px;right:12px;}
  .float-product-choose .btp-box .type-box .row .item.active .icon-active{display:block;}
  .float-product-choose .btp-box .type-box .row .item .type{margin-left:56px;color:#787878;}
  .float-product-choose .btp-box .type-box .row .item.active .type{margin-left:56px;color:#4448f8;}
  .float-product-choose .btp-box .prop-box{flex:1;color:#787878;font-size:12px;}
  .float-product-choose .btp-box .prop-box .prop{/*width:100%;height:30px;*/line-height:30px;position:relative;}
  .float-product-choose .btp-box .prop-box .prop:first-child{margin-top:8px;}
  .float-product-choose .btp-box .prop-box .prop.active{background-color:rgba(0,0,0,0.03);color:#4448f8;}
  .float-product-choose .btp-box .prop-box .prop span{margin-left:40px;width:226px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .float-product-choose .btp-box .prop-box .prop .icon-active{display:none;background:url(./images/icon_to_right1.png) no-repeat;width:7px;height:14px;position:absolute;top:8px;left:18px;}
  .float-product-choose .btp-box .prop-box .prop.active .icon-active{display:block;}
  .float-product-choose .btp-box .prop-box .prop:hover{background-color:rgba(0,0,0,0.03);cursor:pointer;}
  .float-product-choose .triangle-top{width:0px;height:0px;border-width:0 8px 8px;border-style:solid;border-color:transparent transparent #4448f8;position:absolute;top:-7px;left:260px;}
</style>
